import { useState, useRef } from "react";
import { v4 as uuidV4 } from "uuid";
import dayjs from "dayjs";
import "./index.scss";
import avatar from "../../images/bozai.png";

const Comment = (props) => {
  const { commentList, setcommentList } = props;
  // 评论
  const [commentValue, setCommentValue] = useState("");
  const textareaRef = useRef(null);
  const publishHandler = () => {
    setcommentList([
      ...commentList,
      {
        rpid: uuidV4,
        user: {
          uid: "36080105",
          avatar,
          uname: "许嵩"
        },
        content: commentValue,
        ctime: dayjs(new Date()).format("MM-DD hh:mm"),
        like: 999
      }
    ]);
    setCommentValue("");
    // 重新聚焦
    textareaRef.current.focus();
  };
  return (
    <div className="reply-wrap">
      {/* 发表评论 */}
      <div className="box-normal">
        {/* 当前用户头像 */}
        <div className="reply-box-avatar">
          <div className="bili-avatar">
            <img className="bili-avatar-img" src={avatar} alt="用户头像" />
          </div>
        </div>
        <div className="reply-box-wrap">
          {/* 评论框 */}
          <textarea
            ref={textareaRef}
            value={commentValue}
            onChange={(e) => setCommentValue(e.target.value)}
            className="reply-box-textarea"
            placeholder="发一条友善的评论"
          />
          {/* 发布按钮 */}
          <div onClick={publishHandler} className="reply-box-send">
            <div className="send-text">发布</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Comment;
